<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页</title>
	<link rel="shortcut icon" href="favicon.ico">
	<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
	<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
	<link href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet"/>
	<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f4f4f4;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
		}

		.welcome-container {
			background-color: #fff;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			width: 300px;
			text-align: center;
		}

		.welcome-container h1 {
			color: #333;
		}

		.welcome-container p {
			color: #555;
		}

		.logout-button {
			margin-top: 20px;
			padding: 10px 20px;
			background-color: #f44336;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		.logout-button:hover {
			background-color: #d32f2f;
		}

		.date-time-display {
			margin-top: 10px;
			color: #666;
			font-size: 0.9em;
		}
	</style>
</head>


<body class="gray-bg">

	<div class="welcome-container">
		<h1>欢迎, [[${user.userName}]]!</h1>
		<p>您已成功登录后台管理系统。</p>
		<div class="date-time-display" id="currentDateTime"></div>
	</div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/flot/jquery.flot.js}"></script>

<th:block th:include="include :: sparkline-js" />
<script type="text/javascript">
    // 显示当前日期和时间
    function displayDateTime() {
        const now = new Date();
        const options = {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false // 使用24小时制
        };
        const formattedDateTime = now.toLocaleDateString('zh-CN', options) ;
        document.getElementById('currentDateTime').textContent = `${formattedDateTime}`;
    }

    // 页面加载时显示日期和时间
    window.onload = function() {
        displayDateTime();
        // 每秒更新一次时间
        setInterval(displayDateTime, 1000);
    };
</script>
</body>
</html>
